<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="handleSearchList()"
          size="small">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch('listQuery')"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" ref="listQuery" :model="listQuery" size="small" label-width="140px">
          <el-form-item prop="orderSn" label="输入搜索：">
            <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item prop="account" label="用户账号：">
            <el-input v-model="listQuery.account" class="input-width" placeholder="用户账号"></el-input>
          </el-form-item>
          <el-form-item prop="createTime" label="提交时间：">
            <el-date-picker
              class="input-width"
              v-model="listQuery.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="orderStatus" label="订单状态：">
            <el-select v-model="listQuery.orderStatus" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in statusOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card style="margin-top: 20px;" shadow="never" >
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    
    <div class="table-container">
      <el-table
        :data="orderListData"
        v-loading="dataListLoading"
        style="width: 100%; font-size:15px" border>
        <el-table-column
        type="index"
        width="50"
        align="center">
        </el-table-column>
        <el-table-column
          prop="orderSn"
          label="订单编号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="user.account"
          label="用户账户名"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderStatus === 0" type="danger">待付款</el-tag>
            <el-tag v-else-if="scope.row.orderStatus === 1" color="#A3E4D7">待发货</el-tag>
            <el-tag v-else-if="scope.row.orderStatus === 2" type="warning">待收货</el-tag>
            <el-tag v-else-if="scope.row.orderStatus === 3" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row.orderStatus === 4" color="#EBDEF0">已关闭</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="payAmount"
          label="实付款"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.returnStatus === 1" style="text-decoration: line-through">{{scope.row.realityAmount | number_format}}</span>
            <span v-else>{{scope.row.payAmount | number_format}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="handleViewOrder(scope.row)">订单详情</el-button>
            <el-button size="small" v-if="scope.row.orderStatus === 1" type="warning" @click="showDeliveryDialog(scope.row)">订单发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

    </div>

    <!-- ================================物流发货================================================= -->
    
    <el-dialog title="发货物流信息" :visible.sync="Logistics_dialogFormVisible" width="50%">
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">收货人</el-col>
          <el-col :span="8" class="table-cell-title">手机号码</el-col>
          <el-col :span="8" class="table-cell-title">邮政编码</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{this.order.takeoverName}}</el-col>
          <el-col :span="8" class="table-cell">{{this.order.takeoverPhone}}</el-col>
          <el-col :span="8" class="table-cell">{{this.order.takeoverZip}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell-title">收货详细地址</el-col>
          <el-col :span="8" class="table-cell-title">物流公司</el-col>
          <el-col :span="8" class="table-cell-title">物流单号</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{this.order | formatAddress}}</el-col>
          <el-col :span="8" class="table-cell">
            <el-select v-model="logisticsForm.company" placeholder="请选择物流公司" clearable>
            <el-option label="顺丰快递" value="顺丰快递"></el-option>
            <el-option label="圆通快递" value="圆通快递"></el-option>
            <el-option label="申通快递" value="申通快递"></el-option>
            <el-option label="韵达快递" value="韵达快递"></el-option>
            <el-option label="中国邮政速递物流" value="中国邮政速递物流"></el-option>
            <el-option label="德邦物流" value="德邦物流"></el-option>
            <el-option label="中通快递" value="中通快递"></el-option>
            <el-option label="京东物流" value="京东物流"></el-option>
          </el-select>
          </el-col>
          <el-col :span="8" class="table-cell">
            <el-input v-model="logisticsForm.sn"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="Logistics_dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleDeliver">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import {number_format} from '@/filters/money-filter'
import {formatDate} from '@/utils/date';

export default {
  name: '',
  data () {
    return {
      orderListData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      Logistics_dialogFormVisible: false,
      returnVisible: false,
      logisticsForm: {
        sn: '',
        company: ''
      },
      logisticsRules: {
        sn: [
          { required: true, message: '物流单号不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '物流公司必须选择', trigger: 'blur'}
        ]
      },
      orderId: '',
      order: {},
      returnForm: {
        returnType: '',
        returnReason: '',
        returnNote: '',
        userPhone: '',
      },
      returnType: '',
      returnReason: '',
      returnNote: '',
      searchForm: {
        key: ''
      },
      listQuery: {
        orderSn: '',
        orderStatus: '',
        account: '',
        createTime: '',
      },
      statusOptions: [
        {
          label: '待付款',
          value: 0
        },
        {
          label: '待发货',
          value: 1
        },
        {
          label: '待发货',
          value: 2
        },
        {
          label: '已完成',
          value: 3
        },
        {
          label: '售后',
          value: 4
        }
      ],
    }
  },
  created () {
    this.getOrderList()
  },

  filters: {
    formatAddress(order) {
        let str = order.takeoverProvince;
        if (order.takeoverCity != null) {
          str += "  " + order.takeoverCity;
        }
        str += "  " + order.takeoverDistrict;
        str += "  " + order.takeoverAddress;
        return str;
      },
  },

  methods: {
    getOrderList () {
      console.log('*********')
      this.orderListLoading = true
      this.$http({
        url: this.$http.adornUrl('/order/order/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'key': this.searchForm.key
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.orderListData = data.page.records
          this.totalPage = data.page.total
          console.log(data.records)
        } else {
          this.orderListData = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getOrderList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getOrderList()
    },
    
    // 发货处理
    showDeliveryDialog(row) {
      this.Logistics_dialogFormVisible = true
      this.orderId = row.orderId
      this.order = row
    },
    handleDeliver () {
      console.log('&&&&&&&&')
      console.log(this.logisticsForm.sn)
      console.log(this.logisticsForm.company)
      if (this.logisticsForm.sn.length===0 || this.logisticsForm.company.length===0) {
        this.$message.error('物流公司和物流单号不能为空');
      }
      else {
        let date = new Date();
        let deliverTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        this.$http({
        url: this.$http.adornUrl('/order/order/update'),
        method: 'post',
        data: this.$http.adornData({
          'orderId': this.orderId,
          'logisticsSn': this.logisticsForm.sn,
          'logisticsCompany': this.logisticsForm.company,
          'orderStatus': 2,
          "deliverTime": deliverTime
        })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '发货成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.Logistics_dialogFormVisible = false
                this.getOrderList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    },

    handleResetSearch(formName) {
      this.$refs[formName].resetFields();
    },

    handleSearchList() {
      this.$http({
        url: this.$http.adornUrl('/order/order/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'orderSn': this.listQuery.orderSn,
          'account': this.listQuery.account,
          'createTime': this.listQuery.createTime,
          'orderStatus': this.listQuery.orderStatus
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.orderListData = data.page.records
          this.totalPage = data.page.total
        } else {
          this.orderListData = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },

    handleViewOrder(row){
        this.$router.push({path:'/orderDetail',query:{id:row.orderId}})
    },

    returnHandle(orderId, returnType, returnReason, returnNote) {
      this.returnVisible = true
      this.orderId = orderId
      this.returnType = returnType
      this.returnReason = returnReason
      this.returnNote = returnNote
    },
    agreeReturn() {
      this.$http({
        url: this.$http.adornUrl('/order/order/update'),
        method: 'post',
        data: this.$http.adornData({
          'orderId': this.orderId,
          'orderStatus': 3,
          'returnStatus': 1
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 500,
            onClose: () => {
              this.returnVisible = false
              this.getOrderList()
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    disagreeReturn() {
      this.$http({
        url: this.$http.adornUrl('/order/order/update'),
        method: 'post',
        data: this.$http.adornData({
          'orderId': this.orderId,
          'orderStatus': 3,
          'returnStatus': 0
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 500,
            onClose: () => {
              this.returnVisible = false
              this.getOrderList()
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.input-width {
    width: 203px;
  }
</style>
